//头部区域
import React from "react";
import { Layout, Dropdown, Menu, Avatar } from "antd";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
} from "@ant-design/icons";

const { Header } = Layout;

const TopHeader = (props) => {
  // const [collapsed, setcollapsed] = useState(false);
  const changeCollapsed = () => {
    // setcollapsed(!collapsed)
    props.changeCollapsed();
    // console.log(props)
  };
  const {
    role: { roleName },
    username,
  } = JSON.parse(localStorage.getItem("token"));
  const menu = (
    <Menu>
      <Menu.Item key="1">{roleName}</Menu.Item>
      <Menu.Item
        key="2"
        danger
        onClick={() => {
          props.history.replace("/login");
          localStorage.removeItem("token");
        }}
      >
        退出登录
      </Menu.Item>
    </Menu>
  );
  return (
    <Header className="site-layout-background" style={{ padding: "0 16px" }}>
      {props.isCollapsed ? (
        <MenuUnfoldOutlined onClick={changeCollapsed} />
      ) : (
        <MenuFoldOutlined onClick={changeCollapsed} />
      )}
      <div style={{ float: "right" }}>
        <span style={{ padding: "0 16px" }}>
          欢迎<span style={{ color: "cornflowerblue" }}>{username}</span>回来
        </span>
        <Dropdown overlay={menu}>
          <a className="ant-dropdown-link" onClick={(e) => e.preventDefault()}>
            <Avatar size="large" icon={<UserOutlined />} />
          </a>
        </Dropdown>
      </div>
    </Header>
  );
};
const mapStateToProps = (state) => {
  const {
    CollapsedReducer: { isCollapsed },
  } = state;
  return {
    isCollapsed,
  };
};
const mapDispatchToProps = {
  changeCollapsed() {
    return {
      type: "chang_colling",
    };
  },
};
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withRouter(TopHeader));
